<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue入门</title>
</head>
<body>
    <div id="app">
        <div id="dv">
            <!--        插值表达式:{{}}
                    运算符
                    三元运算符
            -->
            {{msg}}
            {{1+1}}
            {{1==1?"yes":"no"}}
<!--            v-bind:简写形式 : -->
            <input type="text" :value="username">
        </div>

        <div id="dv1">
            {{msg}}
        </div>

        <button type="button" v-on:click="fun1">vueTest</button>
        <hr>
        <span v-html="msg"></span>
    </div>

</body>
<!--引入vue.js文件-->
<script SRC="js/vue.js"></script>
    <script>
        //传统的JS
        //document.getElementById("dv").innerHTML="我是div";

        //vue操作
        //1.创建vued对象
        new Vue({
            el:'#app', //指定接管页面区域
            data:{//生产数据的区域
                msg:"<em>yes",
                username:"zhangsan"
            },
            methods:{//声明函数的区域
                /*fun1:function () {
                    alert("test vue")
                }*/
                fun1(){
                    alert("test vue")
                }
            }
        })
    </script>
</html>